<script setup>
import { SearchOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
import CreateUser from "./components/CreateUser.vue"
import Pagination from "@/components/Pagination/Pagination.vue";
import {userList} from "@/apis/user"
import {ref,reactive,provide} from "vue"
import { login } from '@/apis/login';

const columns = [
    {
        title: '用户编号',
        dataIndex: 'id',
        align: 'center',
        fixed: 'left',
    },
    {
        title: '账号',
        dataIndex: 'nickName',
        align: 'center',
    },
    {
        title: '昵称',
        dataIndex: 'username',
        align: 'center',
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        align: 'center',
    },
    {
        title: '头像',
        dataIndex: 'img',
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'enabled',
        align: 'center',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center',
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        align: 'center',
    },
    // {
    //     title: '操作',
    //     dataIndex: 'operate',
    //     align: 'center',
    //     width: 120,
    //     fixed: 'right',
    // },
];
const loading = ref(true);
const dataSource = ref(null);
const roleRef=ref(null);
const checked=ref(true);
const total=ref(0)
provide("getUser",()=>getUser())
const formState = reactive({
    page: 1,
    size: 10,
    cid: null,
})
const getUser= async()=>{
    let res= await userList()
    if(res.code===200){
        loading.value=false;
        dataSource.value=res.data
    }
}
const changepage=(options)=>{
    loading.value = true;
    formState.page = options.page;
    formState.size = options.pageSize;
}
const handleCreateUser=()=>{
    console.log(roleRef.value.open);
    roleRef.value.open=true;
}


getUser();
</script>
<template>
    <div class="user-container">
        <div class="user-search">
            <!-- <a-button type="primary" >
                <template #icon>
                    <SearchOutlined />
                </template>
                搜索
            </a-button>&nbsp; -->
            <a-button type="primary" @click="handleCreateUser">
                <template #icon>
                    <PlusCircleOutlined />
                </template>
                创建用户
            </a-button>
        </div>
        <div ref="tableRef">
            <a-table :loading="loading" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="false"
                :scroll="{ x: 'max-content' }">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'enabled'">
                        <a-switch v-model:checked="record.enabled" />
                    </template>
                    <template v-else-if="column.dataIndex === 'img'">
                        <div class="">
                            <img :src="text" alt="" width="30">
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'operate'">
                        <div class="">
                            <a-button type="link" size="small" @click="roleEdit(record)">编辑</a-button>
                            <a-button type="link" size="small" danger>删除</a-button>
                        </div>
                    </template>
                </template>
            </a-table>
        </div>
        <Pagination :total="total" :page="formState.page" :size="formState.size" @changepage="changepage" />
        <create-user ref="roleRef" />
    </div>
</template>
<style lang='scss' scoped>
.user-container {
    width: 100%;
    height: 100%;
    background: var(--fff-141414-color);
    padding: 15px;

    .user-search {
        display: flex;
        margin-bottom: 10px;
    }
}
</style>